<template>
	<!-- 整个大框架 -->
	<div id="app">
		<!-- 内容框架 -->
		<div>
			<!-- 头部 -->
			<div class="header-wrapper">
				<div class="head-content">
					<!-- logo -->
					<img src="./assets/qmlogo.png" class="logo" />
					<!-- 搜索大框 -->
					<div class="search-wrapper">
						<!-- ipnut大框 -->
						<div class="search-content">
							<input class="search-input" type="search" value placeholder="请输入您要搜索的内容" />
							<!-- 搜索和图标 -->
							<div class="search-suoyou">
								<i class="el-icon-search" style="color: white;font-weight: 700;position: relative;top: 14px;left: 20px;"></i>
								<span class="search-btn">
									<p style="color: aliceblue;position: relative; top: -8px;left: 50px;"> 搜索</p>
								</span>
								<!-- 图标库的 搜索<el-button  icon="el-icon-search" style="background-color: #FF1E66;outline: 0;">搜索</el-button> -->
							</div>
						</div>

					</div>
					<!-- 右边内容 -->
					<div class="nav-wrapper">
						<a href="#" class="link-item">视频上传</a>
						<a href="#" class="link-item">企业机构认证</a>
						<a href="#" class="link-item">MNC机构</a>
						<a href="#" class="link-item">联系我们</a>
					</div>

					<!-- 推荐 -->

				</div>
				<div class="channel-wrapper">
					<ul class="channel-list">

						<li class="ul-li">
							<a href=" #" class="channel-link current">推荐</a>

						</li>
						<li class="ul-li">
							<a href="#" class="onea">萌宠</a>

						</li>
						<li class="ul-li">
							<a href="#" class="onea">知识</a>

						</li>
						<li class="ul-li">
							<a href="#" class="onea">搞笑</a>

						</li>
						<li class="ul-li">
							<a href="#" class="onea">乡村</a>

						</li>
						<li class="ul-li">
							<a href="#" class="onea">体育</a>

						</li>
						<li class="ul-li">
							<a href="#" class="onea">军事</a>

						</li>
						<li class="ul-li">
							<a href="#" class="onea">女装</a>

						</li>
						<li class="ul-li">
							<a href="#" class="onea">口红</a>

						</li>
						<li class="ul-li">
							<a href="#" class="onea">男装</a>

						</li>
						<li class="ul-li">
							<a href="#" class="onea">影视</a>

						</li>
						<li class="ul-li">
							<a href="#" class="onea">风景</a>

						</li>


					</ul>


				</div>
			</div>




			<!-- 中间部分 -->
			<div class="main-wrapper">
				<div class="tab-card" data-loaded>
					<!-- 热门视频 -->
					<el-row :gutter="20">

						<p style="height: 23px;width: 3px;background-color: red;position: relative;top: 34px;left: -8px;"></p>
						<h2 style="font-size: 30px;font-weight: 300;cursor: pointer;">{{res.title}}</h2>
						<el-col :span="4" v-for="(item,index) in res.lists" :key="index">

							<div class="remen" style="position: relative;top: 27px;">

								<div class="one">
									
									<img class="imgg" :src="item.pic" style="height:260px;width: 170px;border-radius: 5px;">
									<span style="background-color: black;color: aliceblue;font-size: 14px;position: relative;left: 128px;top: -26px;border-radius: 5px;font-weight: 300;">10:21</span>
									<a href="#" class="onea">
										<p style="font-size: 14px;">{{item.p1}}</p>
									</a>
									<small><i class="el-icon-video-play" style="cursor: pointer;font-size: 14px;"></i>{{item.p2}}</small>
									<span style="color: white;">nisi</span>
									<i class="el-icon-user" style="cursor: pointer;font-size: 14px;"><small>{{item.p3}}</small></i>
								</div>
							</div>

						</el-col>
					</el-row>


					<!-- 知识 -->
					<div class="zhishi" style="position: relative;top: 85px;cursor: pointer;">

						<el-row :gutter="20">
							<p style="height: 23px;width: 3px;background-color: red;position: relative;top: 34px;left: -8px;"></p>
							<h2 style="font-size: 30px;font-weight: 300;">{{zhishi.title}}</h2>
							<el-col :span="4" v-for="(item,index) in zhishi.lists" :key="index">

								<div class="remen" style="position: relative;top: 27px;">

									<div class="one">
										<img class="imgg" :src="item.pic" style="height:260px;width: 170px;border-radius: 5px;">
										<span style="background-color: black;color: aliceblue;font-size: 14px;position: relative;left: 128px;top: -26px;border-radius: 5px;">00:32</span>
										<a href="#" class="onea">
											<p style="font-size: 14px;">{{item.p1}}</p>
										</a>
										<small><i class="el-icon-video-play" style="cursor: pointer;font-size: 14px;"></i>{{item.p2}}</small>
										<span style="color: white;">nisi</span>
										<i class="el-icon-user" style="cursor: pointer;font-size: 14px;"><small>{{item.p3}}</small></i>
									</div>
								</div>

							</el-col>
						</el-row>
					</div>


					<!-- 萌娃 -->
					<div class="mengwa" style="position: relative;top: 170px;cursor: pointer;">

						<el-row :gutter="20">
							<p style="height: 23px;width: 3px;background-color: red;position: relative;top: 34px;left: -8px;"></p>
							<h2 style="font-size: 30px;font-weight: 300;">{{mengwa.title}}</h2>
							<el-col :span="4" v-for="(item,index) in mengwa.lists" :key="index">

								<div class="remen" style="position: relative;top: 27px;">

									<div class="one">
										<img class="imgg" :src="item.pic" style="height:260px;width: 170px;border-radius: 5px;">
<span style="background-color: black;color: aliceblue;font-size: 14px;position: relative;left: 128px;top: -26px;border-radius: 5px;">19:06</span>
										<a href="#" class="onea">
											<p style="font-size: 14px;">{{item.p1}}</p>
										</a>
										<small><i class="el-icon-video-play" style="cursor: pointer;font-size: 14px;"></i>{{item.p2}}</small>
										<span style="color: white;">nisi</span>
										<i class="el-icon-user" style="cursor: pointer;font-size: 14px;"><small>{{item.p3}}</small></i>
									</div>
								</div>

							</el-col>
						</el-row>
					</div>


					<!-- 时尚 -->
					<div class="shishang" style="position: relative;top: 250px;cursor: pointer;">

						<el-row :gutter="20">
							<p style="height: 23px;width: 3px;background-color: red;position: relative;top: 34px;left: -8px;"></p>
							<h2 style="font-size: 30px;font-weight: 300;">{{shishang.title}}</h2>
							<el-col :span="4" v-for="(item,index) in shishang.lists" :key="index">

								<div class="remen" style="position: relative;top: 27px;">

									<div class="one">
										<img class="imgg" :src="item.pic" style="height:260px;width: 170px;border-radius: 5px;">
										<span style="background-color: black;color: aliceblue;font-size: 14px;position: relative;left: 128px;top: -26px;border-radius: 5px;">00:11</span>
										<a href="#" class="onea">
											<p style="font-size: 14px;">{{item.p1}}</p>
										</a>
										<small><i class="el-icon-video-play" style="cursor: pointer;font-size: 14px;"></i>{{item.p2}}</small>
										<span style="color: white;">nisi</span>
										<i class="el-icon-user" style="cursor: pointer;font-size: 14px;"><small>{{item.p3}}</small></i>
									</div>
								</div>

							</el-col>
						</el-row>
					</div>



					<!-- 风景 -->
					<div class="fengjing">

						<el-row :gutter="20">
							<p style="height: 23px;width: 3px;background-color: red;position: relative;top: 34px;left: -8px;"></p>
							<h2 style="font-size: 30px;font-weight: 300;">{{fengjing.title}}</h2>
							<el-col :span="4" v-for="(item,index) in fengjing.lists" :key="index">

								<div class="remen" style="position: relative;top: 27px;">

									<div class="one">
										<img class="imgg" :src="item.pic" style="height:260px;width: 170px;border-radius: 5px;">
										<span style="background-color: black;color: aliceblue;font-size: 14px;position: relative;left: 128px;top: -26px;border-radius: 5px;">15:21</span>
										<a href="#" class="onea">
											<p style="font-size: 14px;">{{item.p1}}</p>
										</a>
										<small><i class="el-icon-video-play" style="cursor: pointer;font-size: 14px;"></i>{{item.p2}}</small>
										<span style="color: white;">nisi</span>
										<i class="el-icon-user" style="cursor: pointer;font-size: 14px;"><small>{{item.p3}}</small></i>
									</div>
								</div>

							</el-col>
						</el-row>
					</div>
				</div>
			</div>



			<!-- 底部 -->
			<div class="footer-wrapper">

				<div class="footer-inner">
					© 2020 Baidu 京ICP证030173号 <a href="#" target="_blank" rel="noreferrer" style="color: #999;text-decoration: none;">京公网安备11000002000001&nbsp;&nbsp;&nbsp;
						京网文（2017）2863-327号</a>

				</div>

			</div>

		</div>

		<HelloWorld msg="Welcome to Your Vue.js App" />
	</div>
</template>

<script>
	import HelloWorld from './components/HelloWorld.vue'

	let zhishi = {
		title: "知识",
		lists: [{

				pic: require("./assets/7.jpg"),
				p1: "史上最硬核的火车,一生只",
				p2: "54万",
				p3: "杨逵医生V"
			},
			{
				pic: require("./assets/8.jpg"),
				p1: "我鼓励所有中国人练蹲起",
				p2: "121万",
				p3: "心心好物分享"
			},
			{
				pic: require("./assets/9.jpg"),
				p1: "冷门知识,有十种你不知道",
				p2: "187万",
				p3: "河北康医生"
			},
			{
				pic: require("./assets/10.jpg"),
				p1: "深圳最牛房东拥有很多房子",
				p2: "12万",
				p3: "与可爱私奔"
			},
			{
				pic: require("./assets/11.jpg"),
				p1: "你睡觉的时候暴露你的钱财",
				p2: "43万",
				p3: "小刘不会扣球"
			},
			{
				pic: require("./assets/12.jpg"),
				p1: "有人问我男性吃什么补身体",
				p2: "30万",
				p3: "样子很酷"
			}
		],

	}




	let shishang = {
		title: "时尚",
		lists: [{

				pic: require("./assets/01.jpg"),
				p1: "#我要上热门了#立秋了",
				p2: "22万",
				p3: "days夏夏"
			},
			{
				pic: require("./assets/02.jpg"),
				p1: "女人看了都会心动的秋装",
				p2: "1.6万",
				p3: "鸭梨教穿搭"
			},
			{
				pic: require("./assets/03.jpg"),
				p1: "#夏食记#你才不是我的小",
				p2: "23万",
				p3: "大码女装"
			},
			{
				pic: require("./assets/04.jpg"),
				p1: "面料柔软舒适",
				p2: "7.3万",
				p3: "火火街拍亚"
			},
			{
				pic: require("./assets/05.jpg"),
				p1: "#街拍美女#王总的超级玛丽",
				p2: "11万",
				p3: "康哥"
			},
			{
				pic: require("./assets/06.jpg"),
				p1: "#有没有胆子大的买给老婆",
				p2: "1万",
				p3: "广西蓝烟"
			}
		],

	}



	let mengwa = {
		title: "萌娃",
		lists: [{

				pic: require("./assets/13.jpg"),
				p1: "#宝宝#各位宝妈可不可以帮",
				p2: "51万",
				p3: "酷派15720"
			},
			{
				pic: require("./assets/14.jpg"),
				p1: "#网孔喷床看点多#漂亮",
				p2: "29万",
				p3: "萍水相逢"
			},
			{
				pic: require("./assets/15.jpg"),
				p1: "#这是高手#成功没有快捷键",
				p2: "5.4万",
				p3: "懂得珍惜"
			},
			{
				pic: require("./assets/16.jpg"),
				p1: "啥都懂 教你怎么按摩身体",
				p2: "32万",
				p3: "淘气包小剋"
			},
			{
				pic: require("./assets/17.jpg"),
				p1: "姥姥把他接走三个多月了",
				p2: "44万",
				p3: "清水123"
			},
			{
				pic: require("./assets/18.jpg"),
				p1: "#弟弟被姐姐打，弟弟哭了",
				p2: "445万",
				p3: "中国青年网"
			}
		],

	}

	let remenShipin = {
		title: "热门视频",
		lists: [{

				pic: require("./assets/1.jpg"),
				p1: "#夏食记#你才不是我的小可",
				p2: "123万",
				p3: "长治容媒体报道"
			},
			{
				pic: require("./assets/2.jpg"),
				p1: "#香港富豪千亿孙女在隆胸后",
				p2: "162万",
				p3: "点闻时讯"
			},
			{
				pic: require("./assets/3.jpg"),
				p1: "#河北省中旬老奶奶做的蔗糖",
				p2: "149万",
				p3: "零时速报"
			},
			{
				pic: require("./assets/4.jpg"),
				p1: "#是人类的渺小无知还是大自",
				p2: "134万",
				p3: "跑酷晓峰"
			},
			{
				pic: require("./assets/5.jpg"),
				p1: "#小谷姐姐麻辣烫员工记",
				p2: "130万",
				p3: "啊雪不吃糖"
			},
			{
				pic: require("./assets/6.jpg"),
				p1: "#新浪娶新娘当天发生的奇葩",
				p2: "127万",
				p3: "中国青年网"
			}
		],


	};

	let fengjing = {
		title: "风景",
		lists: [{

				pic: require("./assets/19.jpg"),
				p1: "明星结婚成千上万千人点赞",
				p2: "27万",
				p3: "他没有睡醒"
			},
			{
				pic: require("./assets/20.jpg"),
				p1: "隔壁兄弟结婚给我送的礼物",
				p2: "182万",
				p3: "马哥正能量"
			},
			{
				pic: require("./assets/21.jpg"),
				p1: "#我要上热门#能看懂的",
				p2: "15万",
				p3: "甜甜小盆友"
			},
			{
				pic: require("./assets/22.jpg"),
				p1: "#我想上电视#此景真是太好",
				p2: "7.9万",
				p3: "王总的大家庭"
			},
			{
				pic: require("./assets/23.jpg"),
				p1: "非洲人永远都不会吃的东西",
				p2: "5.4万",
				p3: "相识是缘分"
			},
			{
				pic: require("./assets/24.jpg"),
				p1: "#家家都有本难念的陉#好难",
				p2: "10万",
				p3: "大伯叔叔"
			}
		],


	};
	export default {
		name: 'app',
		components: {
			HelloWorld
		},
		data() {
			return {
				res: remenShipin,
				zhishi: zhishi,
				mengwa: mengwa,
				shishang: shishang,
				fengjing: fengjing

			}
		}

	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		/*  text-align: center; */
		color: #2c3e50;
		margin-top: 15px;
		width: 100%;
	}

	/* 全民logo的图片 */
	.logo {
		height: 45px;
		width: 140px;

		float: left;
	}

	/* 头部内容框 */
	.header-wrapper .head-content {
		width: 1168px;
		margin: 0 auto;
		padding: 20px 16px;


	}

	/* 清除浮动 */
	.header-wrapper .head-content:after {
		content: "";
		display: block;
		visibility: hidden;
		clear: both;
		height: 0;
		line-height: 0;
	}


	/* 搜索 */
	.search-wrapper {
		position: relative;
		float: left;
		top: 6px;
		height: 40px;
		width: 500px;
		margin: 0 0 0 35px;
		border-radius: 5px;
		background: #f5f5f5;
	}

	/* 文本框和搜索大框 */
	.search-wrapper .search-context {
		position: relative;
		width: 420px;
		height: 100%;
		padding-top: 1px;
	}

	/* input */
	.search-input {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 0 5px 0 20px;
		border: 1px solid transparent;
		outline: 0;
		background-color: transparent;
		caret-color: red;
		height: 30px;
		width: 400px;
		line-height: 30px;
		font-size: 14px;
	}

	/* 图标和搜索 */
	.search-suoyou {
		height: 40px;
		width: 100px;
		background-color: #ff1e66;
		border-radius: 5px;
		cursor: pointer;
		float: right;

	}

	/* 头部右边的内容 */
	.nav-wrapper {

		margin-top: 17px;

	}

	/* a标签的设置 */
	.link-item {
		margin-left: 36px;
		font-size: 15px;
		color: #6f6f6f;
		cursor: pointer;
		text-decoration: none;
		font-weight: 300;

	}

	.channel-link.current {
		font-weight: 900;
		color: #ff1e66;
	}

	.channel-link {
		position: relative;
		display: block;

	}

	.channel-link.current:after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		display: inline-block;
		width: 18px;
		height: 3px;
		margin-left: -9px;
		border-radius: 1.5px;
		background-color: #ff1e66;
	}

	/* 推荐大框*/
	.channel-wrapper {
		height: 40px;
		background: hsla(0, 0%, 97%, .96863);
		box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .08);
		position: relative;
		top: 6px;
		width: 100%;

	}

	/* ul框架 */
	.channel-list {
		width: 1200px;
		margin: 0 auto;
		list-style-type: none;


	}

	/* li */
	.ul-li {

		float: left;
		line-height: 40px;
		margin: 0 25px 0 15px;
	}

	/* a标签 */
	.ul-li a {
		color: black;
		font-size: 14px;
		text-decoration: none;
		padding: 0 16px;
	}

	/* a标签鼠标划上 */
	.ul-li a:hover {
		color: #FF1E66;
		position: relative;
		top: 5px;
		font-weight: 900;
	}

	/* 热门视频的大框*/
	.main-wrapper {
		height: 300px;
		width: 1200px;

		margin: 0 auto;
		position: relative;
		top: 45px;
	}

	/* 图片样式 */

	div.one:hover {
		transform: scale(1.2);
		transition: all 2s linear;
		opacity: 0.7;
	}

	.onea {
		color: black;
		text-decoration: none;
		font-size: 15px;
	}

	.onea:hover {
		color: red;
	}


	.fengjing {
		height: 500px;
		position: relative;
		top: 330px;

		cursor: pointer;
	}

	/* 底部样式 */
	.footer-wrapper {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 10px 0;
		background-color: #444;
	}

	.footer-wrapper .footer-inner {
		font-size: 12px;
		margin: 0 auto;
		color: #999;
		text-align: center;
	}
</style>
